<template>
	<custom-page backgroundColor="#F9F9F9">
		<template #head>
		   <custom-nav-bar :navBackgroundColor="navColor" borderBottomColor="transparent" :float="true">
			   <template #titleBar>
				   <view class="city-row" @click="selectCityClick">
						<image class="location-img" :src="asserts.ic_address"></image>
						<view>昆明市</view>
				   </view>
			   </template>
		   </custom-nav-bar>
		</template>
		<template #page>
			<common-list-view class="index-page-scroll" :guide-observer-id="'guide-observer-id-view'"
				@giudeviewintersectionchange="onGiudeViewIntersectionChange($event)">
				<template #content>
					<view class="main-content">
						<view class="top-bg-image"></view>
						<image class="top-banner-img" :src="ftpUrl + '/ic_index_top_banner2.jpg'" mode="aspectFill" v-if="isShowInfo"></image>
						<view style="height: 300rpx;" v-else></view>
						<view id="guide-observer-id-view"></view>
						<view class="tab-filter-layout" v-if="isShowInfo">
							<view class="tab-layout">
								<view class="tab-item" @click="tabClick(1)">
									<view :class="selectTab==1?'select-text':'normal-text'">兼职助教</view>
									<view class="tab-indate" v-if="selectTab==1"></view>
									<image class="bg-img" :src="ftpUrl + '/ic_index_tab_bg.png'" mode="widthFix" v-if="selectTab==1"></image>
								</view>
								<view class="tab-item" @click="tabClick(2)">
									<view :class="selectTab==1?'select-text':'normal-text'">门店助教</view>
									<view class="tab-indate" v-if="selectTab==2"></view>
									<image class="bg-img" :src="ftpUrl + '/ic_index_tab_bg2.png'" mode="widthFix" v-if="selectTab==2"></image>
								</view>
							</view>
							<view class="filter-layout" v-if="selectTab==1">
								<picker @change="sortFilterChange" :range="sortFilterData.map((e) => e.text)" mode="selector" class="filter-item" v-if="false">
									<view class="filter-item">
										<image class="left-icon" :src="ftpUrl + '/ic_index_sort.png'"></image>
										<view class="filter-title" :class="(practiceStateIndex!=-1)?'.col_01c':'col_585'">{{(practiceStateIndex!=-1)?sortFilterData[practiceStateIndex].text:'综合排序'}}</view>
										<image class="right-img" :src="ftpUrl + '/ic_triangle_bottom_normal.png'"></image>
									</view>
								</picker>
								<picker @change="leveSelectChange" :range="(leaveListData.map((e) => e.grade))" mode="selector" class="filter-item">
									<view class="filter-item">
										<image class="left-icon" :src="ftpUrl + '/ic_index_leave.png'"></image>
										<view class="filter-title" :class="(leaveIndex!=-1)?'.col_01c':'col_585'">{{(leaveIndex!=-1)?leaveListData[leaveIndex].grade:'全部等级'}}</view>
										<image class="right-img" :src="ftpUrl + '/ic_triangle_bottom_normal.png'"></image>
									</view>
								</picker>
								<view class="filter-item" @click="onlySeeOnline">
									<image class="left-icon" :src="ftpUrl + '/ic_online.png'"></image>
									<view class="filter-title" :class="(orderReceivingState)?'.col_01c':'col_585'">只看在线</view>
								</view>
							</view>
							<view class="filter-layout" v-if="selectTab==2">
								<picker @change="sortFilterChange" :range="sortFilterData.map((e) => e.name)" mode="selector" class="filter-item" v-if="false">
									<view class="filter-item">
										<image class="left-icon" :src="ftpUrl + '/ic_index_sort.png'"></image>
										<view class="filter-title">综合排序</view>
										<image class="right-img" :src="ftpUrl + '/ic_triangle_bottom_normal.png'"></image>
									</view>
								</picker>
								<view class="filter-item">
									<image class="left-icon" :src="ftpUrl + '/ic_index_distance.png'"></image>
									<view class="filter-title">距离优先</view>
								</view>
								<view class="filter-item">
									<image class="left-icon" :src="ftpUrl + '/ic_index_evaluate.png'"></image>
									<view class="filter-title">评分优先</view>
								</view>
							</view>
						</view>
						<view v-if="selectTab==1" style="z-index: 1;">
							<template v-if="assistantListData && assistantListData.length>0">
								<view class="assitant-index-item" v-for="(item, index) in assistantListData" :key="index" @click="assistantItemClick(item)">
									<view class="left-img-view">
										<image class="user-img" :src="item.sculptureUrl" mode="aspectFill"></image>
										<image class="level-img" :src="item.picture"></image>
									</view>
									<view class="assistant-right-view">
										<view class="user-name-row">
											<view class="user-name">{{item.name}}</view>
											<assistant-computed-info type="sex" :sex="item.sex"></assistant-computed-info>
											<view class="age-text" v-if="item.age>0">{{item.age}}岁</view>
											<view style="flex: 1;"></view>
											<view class="price-text">￥{{item.gradePriceStr}}</view>
											<view class="time-text">/小时</view>
										</view>
										<view class="evaluate-row">
											<view class="evaluate-num">5.0</view>
											<image class="evaluate-img" :src="ftpUrl + '/ic_evaluate_heart_select.png'" v-for="(item, index) in 5" :key="index"></image>
											<view class="ass-distance-text">距离 {{item.distanceTypeDesc}}</view>
											<view style="flex: 1;"></view>
											<assistant-computed-info type="state" :state="item.orderReceivingState" :stateText="item.orderReceivingStateDesc"></assistant-computed-info>
										</view>
										<assistant-computed-info type="tag5" :labelDescList="item.labelDescList"></assistant-computed-info>
									</view>
								</view>
							</template>
							<template v-else>
								<no-more-holder class="nodata" :image="asserts.ic_nodata2"></no-more-holder>
							</template>
						</view>
						<view v-if="selectTab==2" style="z-index: 1;">
							<view class="merchant-index-item" v-for="(item, index) in pollHallListData" :key="index" @click="storeItemClick(item)">
								<image class="left-img" :src="(item.omittedGraph)?item.omittedGraph[0]:''" mode="aspectFill"></image>
								<view class="center-view">
									<view class="name-txt clamp1">{{item.name}}</view>
									<view class="time-row">
										<view class="source-text">5.0分</view>
										<view class="service-time">服务时间：{{item.businessHoursStart}} - {{item.businessHoursEnd}}</view>
									</view>
									<view class="address-text clamp1">{{item.address}}</view>
								</view>
								<view class="right-view">
									<view class="call-btn">拨打电话</view>
									<view class="distance-text">距离 {{item.distanceTypeDesc}}</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</common-list-view>
		</template>
		<template #popup>
			<app-update-popup ref="appUpdate"></app-update-popup>
		</template>
	</custom-page>
</template>

<script>
	import {
		compareVersion, getIsVideo
	} from '../../utils/utils.js'
	export default {
		computed: {
			getAddressIsVideo(){
				return (value)=> {
					return getIsVideo(value)
				}
			},
			getGradeId(){
				if(this.leaveListData && this.leaveListData.length>0 && this.leaveIndex != -1){
					return this.leaveListData[this.leaveIndex].id
				}else{
					return ''
				}
			},
			
			getSortType(){
				if(this.practiceStateIndex != -1){
					return this.sortFilterData[this.practiceStateIndex].code
				}else{
					return ''
				}
			}
		},
		data() {
			return {
				sortFilterData: [
					{
						text: '综合排序',
						code: '101'
					},
					{
						text: '服务优先',
						code: '102'
					},
					{
						text: '价格优先',
						code: '103'
					},
					{
						text: '距离优先',
						code: '104'
					},
					{
						text: '年龄优先',
						code: '105'
					},
					{
						text: '价格从低到高',
						code: '106'
					},
					{
						text: '价格从高到低',
						code: '107'
					},
				],
				practiceStateIndex: -1,
				leaveListData: [],
				leaveIndex: -1,
				orderReceivingState: '',
				assistantListData: [],
				pollHallListData: [],
				isShowInfo: true,
				selectTab: 1,
				navColor: 'transparent'
			}
		},
		mounted() {
			//获取系统配置
			this.requestCenter.getSystemConfig().then(res => {
				this.isShowInfo = res.formSupport
				if(res.formSupport){
					this.getAssistantList()
				}else{
					this.selectTab = 2
					this.getPollHallList()
				}
			})
			
			this.getGradeList()
			
			// #ifdef APP-PLUS
			//版本更新
			this.updateApp()
			// #endif
		},
		methods: {
			//版本更新
			updateApp(){
				const systemInfo = uni.getSystemInfoSync();
				let appVersionCode = systemInfo.appVersion;
				this.requestCenter.getAppVersion().then(res => {
					if(compareVersion(res.appVersion, appVersionCode)>0){
						this.$refs.appUpdate.show()
					}
				})
			},
			
			//页面滑动
			onGiudeViewIntersectionChange(event){
				let intersection = (event || {}).intersection || false
				if (intersection) {
					this.navColor = "white"
				} else {
					this.navColor = "transparent"
				}
			},
			
			//点击tab
			tabClick(index){
				this.selectTab = index
				if(index == 2){
					this.getPollHallList()
				}
			},
			
			//助教等级列表
			getGradeList(){
				this.requestCenter.getGradeList().then(res => {
					this.leaveListData = res
				})
			},
			
			//综合筛选
			sortFilterChange(e){
				let index = e.detail.value
				this.practiceStateIndex = index
				this.getAssistantList()
			},
			
			//助教等级
			leveSelectChange(e){
				let index = e.detail.value
				this.leaveIndex = index
				this.getAssistantList()
			},
			
			//点击只看在线
			onlySeeOnline(){
				if(this.orderReceivingState == '1'){
					this.orderReceivingState = ''
				}else{
					this.orderReceivingState = '1'
				}
				this.getAssistantList()
			},
			
			//助教用户列表
			getAssistantList(){
				let params = {
					practiceState: 1,		//兼职助教
					sortType: this.getSortType,		//综合排序
					gradeId: this.getGradeId,		//等级
					orderReceivingState: this.orderReceivingState,		//接单状态
				}
				this.requestCenter.getAssistantList(params).then(res => {
					this.assistantListData = res
				})
			},
			
			//台球厅列表
			getPollHallList(){
				let params = {
					current: 1,
					pageSize: 20,
				}
				this.requestCenter.getPollHallPageList(params).then(res => {
					this.pollHallListData = res.records
				})
			},
			
			//选择城市
			selectCityClick(){
				this.$emit('selectCityBack')
			},
			
			//点击查看助教详情
			assistantItemClick(item){
				uni.navigateTo({
					url: `/pages/assistant-detaill/assistant-detaill?userId=${item.userId}`
				})
			},
			
			//点击查看门店
			storeItemClick(item){
				uni.navigateTo({
					url: `/pages/store-detail/store-detail?pollId=${item.id}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.main-content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.index-page-scroll{
		display: block;
		width: 100%;
		height: 100%;
	}
	.city-row{
		height: var(--title-bar-height);
		display: flex;
		flex-direction: row;
		align-items: center;
		.location-img{
			width: 32rpx;
			height: 32rpx;
			margin-left: 16rpx;
			margin-right: 10rpx;
		}
		view{
			font-size: 32rpx;
			font-weight: 500;
			color: #021624;
		}
	}
	.top-bg-image{
		width: 100%;
		height: 600rpx;
		position: absolute;
		top: 0;
		z-index: 0;
		background: linear-gradient( 148deg, #D8F8FA 0%, #FFF7FE 100%);
	}
	.top-banner-img{
		width: calc(100% - 40rpx);
		height: 300rpx;
		z-index: 9;
		border-radius: 16rpx;
		margin-top: var(--navgation-bar-height);
		margin-bottom: 16rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.tab-filter-layout{
		z-index: 2;
		position: sticky;
		top: var(--navgation-bar-height);
	}
	.tab-layout{
		width: calc(100% - 32rpx);
		margin: 0 16rpx 0 16rpx;
		min-height: 86rpx;
		display: flex;
		flex-direction: row;
		z-index: 1;
		background-color: #DEECF0;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		.tab-item{
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			.bg-img{
				width: 100%;
				height: 88rpx;
				position: absolute;
				z-index: 1;
			}
			.select-text{
				font-size: 32rpx;
				color: #021624;
				font-weight: 500;
				z-index: 2;
			}
			.normal-text{
				font-size: 32rpx;
				color: #585F70;
				font-weight: 500;
				z-index: 2;
			}
			.tab-indate{
				width: 48rpx;
				height: 8rpx;
				background: #01CBFF;
				box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(1,203,255,0.16);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				z-index: 2;
			}
		}
	}
	.filter-layout{
		width: calc(100% - 32rpx);
		margin: -3rpx 16rpx 16rpx 16rpx;
		display: flex;
		flex-direction: row;
		z-index: 1;
		height: 88rpx;
		background-color: white;
		.filter-item{
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.left-icon{
				width: 28rpx;
				height: 28rpx;
			}
			.filter-title{
				font-size: 24rpx;
				color: #585F70;
				margin: 0 16rpx;
			}
			.col_585{
				color: #585F70 !important;
			}
			.col_01c{
				color: #01CBFF !important;
			}
			.right-img{
				width: 12rpx;
				height: 8rpx;
			}
		}
	}
	.assitant-index-item{
		width: calc(100% - 32rpx);
		margin: 0 16rpx 16rpx 16rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 28rpx 28rpx 28rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 2;
		.left-img-view{
			position: relative;
			margin-right: 32rpx;
			.user-img{
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
			}
			.level-img{
				width: 113rpx;
				height: 40rpx;
				position: absolute;
				bottom: -10rpx;
				left: 8rpx;
			}
		}
		.assistant-right-view{
			flex: 1;
			display: flex;
			flex-direction: column;
			.user-name-row{
				display: flex;
				flex-direction: row;
				align-items: center;
				.user-name{
					font-size: 32rpx;
					color: #021624;
					font-weight: 500;
					margin-right: 16rpx;
				}
				.sex-img{
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
				.age-text{
					font-size: 28rpx;
					color: #585F70;
					font-weight: 400;
				}
				.price-text{
					font-size: 28rpx;
					color: #ED3C3D;
					font-weight: 500;
				}
				.time-text{
					font-size: 24rpx;
					color: #585F70;
				}
			}
			.ass-distance-text{
				font-size: 22rpx;
				color: #01CBFF;
				font-weight: 400;
				margin-left: 20rpx;
			}
			.evaluate-row{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 8rpx;
				margin-bottom: 8rpx;
				.evaluate-num{
					font-size: 24rpx;
					color: #FF6A3C;
					margin-right: 8rpx;
				}
				.evaluate-img{
					width: 24rpx;
					height: 24rpx;
					margin-right: 2rpx;
				}
			}
		}
	}
	.merchant-index-item{
		width: calc(100% - 32rpx);
		margin: 0 16rpx 16rpx 16rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx 18rpx 20rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 1;
		.left-img{
			width: 144rpx;
			height: 144rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
		.center-view{
			flex: 1;
			display: flex;
			flex-direction: column;
			.name-txt{
				font-size: 32rpx;
				color: #101413;
				font-weight: 500;
				line-height: 44rpx;
			}
			.time-row{
				display: flex;
				flex-direction: row;
				margin-top: 6rpx;
				.source-text{
					font-size: 24rpx;
					color: #FF6A3C;
					font-weight: 400;
					margin-right: 16rpx;
				}
				.service-time{
					font-size: 24rpx;
					color: #585F70;
					font-weight: 400;
				}
			}
			.address-text{
				font-size: 24rpx;
				color: #585F70;
				line-height: 36rpx;
				font-weight: 400;
				margin-top: 6rpx;
			}
		}
		.right-view{
			display: flex;
			flex-direction: column;
			.call-btn{
				width: 128rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				background: #04BC5C;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				font-weight: 400;
			}
			.distance-text{
				font-size: 22rpx;
				color: #01CBFF;
				font-weight: 400;
				margin-top: 30rpx;
			}
		}
	}
	.nodata{
		display: block;
		width: 100%;
		height: 800rpx;
		overflow: hidden;
		background-color: white;
	}
</style>
